
<link rel="stylesheet" type="text/css" href="/public/store/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="/public/store/daterangepicker-bs3.css">
<ol class="breadcrumb">
    <li><a href="/store">管理</a></li>
    <li><a href="/store">会员管理</a></li>
    <li class="active"><a href="/store/tradeManage">交易统计</a></li>
</ol>
<!-- seat end -->
<div class="row">
    <div class="container-fluid"></div>
    <!-- rightcont end -->
</div>

<!--页面主体-->
<script type="text/html" id="list_tmpl">
    <!--七天统计-->
    <div class="memberbox grid middle tj">
        <div class="li grid line">
            <div class="text-center">
                <p><span class="red">{{hjfee.xiaofei}}</span>元</p>7天客户消费（截至今日0点）
            </div>
        </div>
        <div class="li text-center grid line">
            <div class="text-center">
                <p><span class="red">{{hjfee.chongzhi}}</span>元</p>7天客户充值（截至今日0点）
            </div>
        </div>
        <div class="li text-center grid">
            <div class="text-center">
                <p><span class="red">{{hjfee.zengsong}}</span>元</p>7天商家赠送（截至今日0点）
            </div>
        </div>
    </div>
    <!--根据时间筛选-->
    <div class="memberbox grid">
        <div class="shai">筛选条件：</div>
        <div class="g-col form-inline">
            <input type="text" name="startTime" class="form-control datetime" size="21" placeholder="开始时间" value="{{startDate}}" />
            至
            <input type="text" name="endTime" class="form-control datetime" size="21" placeholder="结束时间" value="{{endDate}}" />
            <span class="blue daterang hand" data-day="6">最近7天</span>
            <span class="blue daterang hand" data-day="29">最近30天</span>
            <div style="padding-top:16px;">
                <!-- <select name="" class="form-control">
                    <option value="">请交易类型</option>
                </select> -->
                <button class="btn gn_btn search">筛选</button>
                <button class="btn gn_btn gray_btn reload">刷新</button>
            </div>
        </div>
    </div>
    <!--交易列表-->
    <table class="table table-bordered from_table">
        <tr>
            <th nowrap class="text-center">交易类型</th>
            <th nowrap class="text-center">金额（元）</th>
            <th class="text-center">交易详情</th>
            <th nowrap class="text-center">交易时间</th>
        </tr>
        {{each historyPage.list as li i}}
        <tr>
            <td nowrap class="text-center">{{li.action}}</td>
            <td nowrap class="text-center">{{li.direction}}{{li.fee}}</td>
            <td>{{li.note}}</td>
            <td nowrap class="text-center">{{li.date}}</td>
        </tr>
        {{/each}}
    </table>
    {{if historyPage.totalPage>1}}
    <nav class="text-right">
        <ul class="pagination">
            {{if historyPage.pageNumber>1}}
            <li>
                <a href="{{historyPage.pageNumber-1}}" aria-label="Previous">
                    <span aria-hidden="true">上一页</span>
                </a>
            </li>
            {{/if}}
            {{for var i = historyPage.pageNumber-5; i < historyPage.pageNumber + 5; i++}}
            {{if i>0 && i <= historyPage.totalPage}}
            <li{{if i == historyPage.pageNumber}} class="active"{{/if}}><a href="{{i}}">{{i}}</a></li>
            {{/if}}
            {{/for}}
            {{if historyPage.pageNumber<historyPage.totalPage}}
            <li>
                <a href="{{historyPage.pageNumber+1}}" aria-label="Next">
                    <span aria-hidden="true">下一页</span>
                </a>
            </li>
            {{/if}}
        </ul>
    </nav>
    {{/if}}
</script>

<!--引入插件js代码-->
<script src="/public/store/moment.js"></script>
<script src="/public/store/daterangepicker.js"></script>

<script>

var para = {};
(function ajaxtodata(){
    $.getJSON('ajaxTrade', para, function(res){
        if (!res.succeed) { alert(res.message); return false;}
//     填充页面主体
        $('.container-fluid').html(template('list_tmpl', $.extend(res.data,para)));

//      时间选框插件插件
        $('.datetime').daterangepicker({format: 'YYYY-MM-DD'}, function(start, end, label) {
            var startTime = start.format('YYYY-MM-DD');
            var endTime = end.format('YYYY-MM-DD');
            $(':input[name=startTime]').val(startTime);
            $(':input[name=endTime]').val(endTime);
        });

//      最近?天点击事件
        $('.daterang').on('click', function(){
            var day = parseInt($(this).attr('data-day'), 10);
            $(':input[name=startTime]').val(moment().subtract(day, 'days').format('YYYY-MM-DD'));
            $(':input[name=endTime]').val(moment().format('YYYY-MM-DD'));
            return false;
        });

//      分页点击事件
        $('.pagination a').off().on('click', function(){
            para.pi = $(this).attr('href');
            if (!para.pi) return false;
            ajaxtodata();
            return false;
        });
//      筛选按钮事件
        $('.search').on('click', function(){
            var startDate = $(':input[name=startTime]').val();
            var endDate = $(':input[name=endTime]').val();
            if (!startDate) return toast('请选择开始时间');
            if (!endDate) return toast('请选择结束时间');
            para = { startDate : startDate, endDate : endDate };
            ajaxtodata();
            return false;
        });
//      刷新按钮事件
        $('.reload').on('click', function(){
            window.location.reload();
        });
    });
})();
</script>